<template>
	<view>
		<!-- <roc-scroll @loadData="loadData" :visible_height="visible_height" :hasMore="hasMore"
			refresher_background="#f5f5f5" :data_number="data_number" :solt_height="solt_height" background="#f5f5f5"
			footer_background="#f5f5f5">
			<view class="" slot="data-content"> -->
				<view class="goods--box">
					<view class="goods--item" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
						<view class="item--cover" :style="{backgroundImage: 'url(' + item.images[0] + ')'}" />
						<view class="item--content">
							<view class="title">{{item.title}}</view>
							<view class="slod-num">已售{{item.buy_num}}
								<view class="lines"></view>好评{{(item.high_opinion/item.opinion || 0)*100}} %
							</view>
							<view class="price">{{item.price}}
								<view>元/次</view>
							</view>
						</view>
					</view>
				</view>
			<!-- </view>
		</roc-scroll> -->
	</view>
</template>
<script>
	export default {
		name:'historyMine',
		data() {
			return {
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 0,
				hasMore: true,
				data: [],
				data_number: 0,
				
				massageList: [],
				massageResultData: {}
			}
		},
		
		mounted() {
			// this.getMassageList()
			this.loadData(0)
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url:'/otherpages/massage/massageDetail?id='+item.id
				})
			},
			loadData(type, callback) {
				uni.showLoading({
					title: "加载中"
				})
				let opts = {
					url: "user/getUserLockLog",
					method: 'post'
				};
			
				if (type == 1) {
					this.initScrollData()
				}
				this.page++
			
				let param = {
					page: 1,
				};
			
				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.data.data.length < res.data.data.per_page)
						this.hasMore = false;
					// 把后端数据赋给页面	
					this.data = [...this.data, ...res.data.data];
			
					this.data_number = this.data.length
					// 隐藏加载条 重置下拉 上拉状态
					uni.hideLoading()
					if (type) callback(false)
				}, error => {
			
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	$padding: 30rpx;
	$margin: 10rpx;
	$radius: 20rpx;

	.ellipsis-1 {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ellipsis-2 {
		max-width: 100%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods--box {
		display: flex;
		flex-wrap: wrap;
		padding: $padding/3;

		.goods--item {
			background: white;
			width: calc(50% - #{$margin*2});
			background: white;
			border-radius: $radius;
			overflow: hidden;
			margin: $margin;

			.item--cover {
				width: 100%;
				padding-top: 100%;
				background-position: center;
				background-size: cover;
			}

			.item--content {
				padding: 20rpx;

				&>.title {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #363737;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}

				&>.slod-num {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #DE8C3E;
					line-height: 28rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;

					.lines {
						width: 1rpx;
						height: 20rpx;
						border: 1rpx solid #DBDBDB;
						margin: 0 10rpx;
					}
				}

				&>.price {
					display: flex;
					align-items: center;
					line-height: 40rpx;
					font-weight: bold;
					color: #d4282d;
					font-size: 28rpx;
					line-height: 42rpx;

					view {
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EC2700;
						line-height: 25rpx
					}
				}
			}
		}
	}
</style>